import React,{useState,useEffect} from 'react'
import { Table , Space, Button , Popconfirm , Drawer , Input , Select , Tree , Tag , Modal} from 'antd'
import {addAdmin , deleteAdmin , updateAdmin , getAdminList } from '../../api/admin.js'
import menus from '../../router/menus'
// 1.引入模块
import ExportJsonExcel from 'js-export-excel'
const Com = () => {
  const [adminList , setAdminList] = useState([])
  useEffect( () =>{
    getAdminList().then(res => {
      console.log(res);
      setAdminList(res.data.data)
    })
  },[])
  const [current ,  setCurrent] = useState(1)
  const [pageSize , setPageSize] = useState(6)
  const columns = [
    {
      title:'序号',
      render (text, record ,index) {
        return <span>{(current - 1) * pageSize + index +1}</span>
      }
    },
    {
      title:'管理员账户',
      dataIndex:'adminname'
    },
    {
      title:'权限',
      dataIndex:'role',
      render(text , record , index){
        return(
          <>
            {
              text === 2 ? <Tag color= 'green'>超级管理员</Tag> : <Tag>管理员</Tag> 
            }
          </>
        )
      }
    },
    {
      title:'操作',
      render(text,record) {
        return (
          
          <Space>

            <Button onClick={()=> {
              setIsModalVisible(true)
              setAdminname(record.adminname)
              setRole(record.role)
              setCheckedKeys(record.checkedKeys)
            }}>编辑</Button>
            <Popconfirm
              title='确定删除吗?'
              cancelText='取消'
              okText='确定'
              onConfirm={() => {
                deleteAdmin({adminid:record.adminid}).then( (r) =>{
                  console.log(r);
                  // setAdminList(res.data.data)
                  getAdminList().then(res => {
                    setAdminList(res.data.data)
                  })
                  
                })
              }}
              onCancel={() =>{}}
            >
              <Button>删除</Button>
            </Popconfirm>
          </Space>
        )
      }
    }
  ]
  //  添加管理员
  const [visible , setVisible] = useState(false)
  const [checkedKeys , setCheckedKeys] = useState(['0-0', '0-1-0'])
  const [adminname , setAdminname] = useState('')
  const [password , setPassword ] = useState('123456')
  const [role , setRole ] = useState(1)
// 编辑管理员
const [isModalVisible , setIsModalVisible] = useState(false)

const exportFile = () => {
        var option = {};

        option.fileName = "管理员列表"

        option.datas = [
          {
            sheetData: adminList,
            sheetName: "sheet",
            sheetFilter: ['adminname', 'role', 'checkedKeys'],
            sheetHeader: ["管理员账户", "权限", '菜单项'],
            columnWidths: [20, 20],
          },
        ];

        var toExcel = new ExportJsonExcel(option); //new
        toExcel.saveExcel(); //保存
}
  return (
      <Space direction='vertical'  style={{width:'100%'}}>
                    <h1>导出</h1>
          <Space>
            <Button onClick={ exportFile }>点击导出数据</Button>
          </Space>
          <Table
            rowKey='adminid'
            dataSource={adminList}
            columns={columns}
            pagination={
              {
                position:['bottomCenter'], //页码位置      
                current:current,
                pageSize:pageSize,
                onChange (page,pageSize) {
                  setCurrent(page)
                  setPageSize(pageSize)
                },

              }
            }
          >

          </Table>
          {/*抽屉 添加管理员*/}
          <Drawer title='添加管理员' placement='right' onClose={() => {setVisible(false)}} visible={visible}>
            <Space direction='vertical' style={{width:'100%'}}>
              <Input value={adminname} onChange={(e) => setAdminname(e.target.value) } placeholder='管理员账户'></Input>
              <Input value={password} onChange={(e) => setPassword(e.target.value )} placeholder='管理员密码'></Input>
              <Select value={role} onChange={(val) => setRole(val)} defaultValue='1' style={{width:'100%'}}>
                <Select.Option value={1}>管理员</Select.Option>
                <Select.Option value={2}>超级管理员</Select.Option>
              </Select>
            </Space> 
            <h1>该管理员拥有的菜单栏权限</h1>
            <Tree
              checkable
              treeData={menus}
              checkedKeys = { checkedKeys }
              onCheck = { checkedKeys => setCheckedKeys(checkedKeys)}
            />
            <Button type='primary' onClick={() => {
              addAdmin({
                adminname, password, role, checkedKeys
              }).then( () => {
                getAdminList().then(res => {
                  setAdminList(res.data.data)
                  setVisible(false)
                  setAdminname('')
                  setPassword('123456')
                  setRole(1)
                  setCheckedKeys(['0-0'])
                })
              })
            }}>添加管理员</Button>
          </Drawer>
          {/*对话框  编辑管理员*/}
          <Modal
             title='编辑管理员'   
             visible={isModalVisible}
             footer= {null}
             onCancel={()=>{setIsModalVisible(false)}}
          >
              <Space direction='vertical' style={{width:'100%'}}>
              <Input readOnly value={adminname} onChange={(e) => setAdminname(e.target.value) } placeholder='管理员账户'></Input>

              <Select value={role} onChange={(val) => setRole(val)} defaultValue='1' style={{width:'100%'}}>
                <Select.Option value={1}>管理员</Select.Option>
                <Select.Option value={2}>超级管理员</Select.Option>
              </Select>
            </Space> 
            <h1>修改管理员的权限</h1>
            <Tree
              checkable
              treeData={menus}
              checkedKeys = { checkedKeys }
              onCheck = { checkedKeys => setCheckedKeys(checkedKeys)}
            />
            <Button type='primary' onClick={() => {
              updateAdmin({
                adminname, role, checkedKeys
              }).then( () => {
                getAdminList().then(res => {
                  setAdminList(res.data.data)
                  setIsModalVisible(false)
                  setAdminname('')
                  setPassword('123456')
                  setRole(1)
                  setCheckedKeys(['0-0'])
                })
              })
            }}>更新</Button>     
          </Modal>
      </Space>
  )
}
export default Com